<template>
<div class="factoryconfirmation">

  <div class="head">
    <div class="btns clearfix">
      <h2>出厂确认</h2>
      <!-- <el-button class="export" :disabled="!editable" type="primary">导出</el-button> -->
    </div>


    <div class="upload">
      <p class="upload-hint">票据/附件</p>
      <div>
        <div class="upload-btn">
          <input type="file"  v-show="editable"  name="file" multiple @change="selectFiles">
          <el-button :disabled="!editable" type="primary">选择附件</el-button>
        </div>

        <ul class="upload-files">
          <li @mouseover="handleOver(item)"  :key="index" @mouseout="handleOut(item)" v-for="(item,index) in attachedFiles">
            <span @click="download(item.id, $event)">{{item.name}}</span>
            <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
            <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
          </li>
        </ul>
      </div>
    </div>
  </div>


</div>
</template>

<script>
import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js'

export default {
  created(){
    this.attachedFiles = _.cloneDeep(this.datas.attachedFiles);
    this.id = _.cloneDeep(this.datas.id);
    this.formInstId = _.cloneDeep(this.datas.formInstId);
  },
  mounted() {

  },
  methods: {
    /**
    将数据更新到父组件
     */
    emitToParent(){
      let obj = {
        attachedFiles: this.attachedFiles,
        id: _cloneDeep(this.datas.id),
        formInstId:  _.cloneDeep(this.datas.formInstId)
      };
      this.$emit("fromFC" , "documentProcess_fd_confirm", obj);
    },
    selectFiles(event) {
      //票据附件
      let self = this;

      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          self.attachedFiles.push({name: event.target.files[i].name, status: 1, id: res.data.datas[0].id});
          self.emitToParent();
        });
      });
    },
    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.attachedFiles.splice(index, 1);
          this.emitToParent();
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },
  },
  data() {
    return {
      id: '',
      formInstId: '',
      attachedFiles: []
    }
  },
  watch: {
    datas(newValue, oldValue){
      this.attachedFiles =  _.cloneDeep(newValue.attachedFiles);
      this.id = _.cloneDeep(newValue.id);
      this.formInstId = _.cloneDeep(newValue.formInstId);
    }
  },
  props: {
    datas: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    }
  }
}
</script>

<style lang="scss">
.factoryconfirmation {

    padding: 20px;
    border: 1px solid #999;

    a {
        color: #409EFF;
    }

    .head {

        .btns {
            width: 100%;
            height: 80px;
            text-align: center;
            .export {
                float: right;
            }
        }

        .upload {
            > div {
                border: 1px solid #999;
                padding: 20px 0 40px 20px;
            }

            .upload-btn {
                position: relative;
                > input {
                    opacity: 0;
                    width: 100px;
                    height: 40px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }

            .upload-files {

                > li {
                    width: 300px;
                    padding: 10px 0;
                    transition: all 0.5s linear;

                    &:hover {

                      >span {
                        color: #409EFF;
                      }
                    }
                  }

                font-size: 16px;
                span {
                    padding: 0 10px;
                    cursor: pointer;
                    display: inline;
                }
                span.el-icon-close:hover {
                    cursor: pointer;
                }
            }
            .upload-hint {
                font-size: 20px;
                margin-bottom: 10px;
            }
        }

    }
}
</style>
